<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		
		<style>
			div{
				
				/*霸道标签  温柔标签 那么我实际只要一点位置 但是我会很霸道 这一行全要*/
				
				background-color: red;
				
				/*width: 800px;*/
				
				height: 500px;
				
				text-align: center;
				
				
				/*所谓的居中 div到左边的距离等于到右边的具体 专业术语 div到左边的距离 外边距  margin*/
				
				/*auto=自动的 automatic  让左边和右边的具体自动相等  因为在不同的分辨率和浏览器下  具体不好写死 让电脑自动去计算*/
				margin: auto;
				
				font-family: "微软雅黑";
				
				font-size: 30px;
				
				/*如果要让块级标签上下居中对齐 直接用vertical-align没有效果  怎么办? 可以设置行高等于块级标签的高度 */
				
				/*vertical-align在什么情况下使用*/
				vertical-align: middle;
				
				line-height: 500px;
			}
			
			table{
				
				/*width: 500px;*/
				
				height: 300px;
				
				background-color: red;
			}
			
			table tr td{
				border: 1px solid red;
				
				vertical-align:middle;
			}
			
			p{
				background-color: green;
			}
			
			span{
				background-color: blue;
			}
		</style>
	</head>
	<body>
		
		
		<div>
			
			中深软通
			
		</div>
		
		
		<p>110</p>
		
		<span>120</span>
		
		<table>
			
			<tr>
				<td>
					abc
				</td>
			</tr>
		</table>
	</body>
</html>
